<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container,
        ul {
            font-size: 0;
        }

        .container {
            width: 900px;
            display: flex;
            flex-wrap: wrap;
        }

        .mid {
            width: 430px;
            height: 430px;
            border: 1px solid;
            position: relative;
        }

        .large {
            width: 430px;
            height: 430px;
            border: 1px solid;
            margin-left: 20px;
        }

        ul {
            list-style: none;
            display: flex;
            margin: 20px 0;
            padding: 0;
        }

        li {
            border: 1px solid;
            margin-right: 10px;
        }

        i {
            display: block;
            width: 231px;
            height: 231px;
            background-color: rgba(0, 255, 0, .3);
            position: absolute;
        }

        .none {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="mid">
            <i class="none"></i>
        </div>
        <div class="large none"></div>
    </div>
    <ul></ul>

    <script>
        const smallArr = ["imgA_s.jpg", "imgB_s.jpg", "imgC_s.jpg"];
        const middleArr = ["imgA_m.jpg", "imgB_m.jpg", "imgC_m.jpg"];
        const largeArr = ["imgA_l.jpg", "imgB_l.jpg", "imgC_l.jpg"];

        const mid = document.querySelector(".mid"); // 中图
        const large = document.querySelector(".large"); // 大图
        const ul = document.querySelector("ul");    // ul
        const square = document.querySelector("i"); // 有颜色的矩形

        ul.innerHTML = smallArr.map((item, index) => `<li><img src='../img/${item}' data-index=${index}></li>`).join('');
        mid.style.background = `url(../img/${middleArr[0]})`;
        large.style.background = `url(../img/${largeArr[0]})`;

        ul.onmouseover = function (event) {
            if (event.target.nodeName == "IMG") {
                let index = event.target.dataset.index;
                mid.style.background = `url(../img/${middleArr[index]})`;
                large.style.background = `url(../img/${largeArr[index]})`;
            }
        }

        mid.onmouseenter = function () {
            square.classList.remove('none');
            large.classList.remove('none');
        }
        mid.onmouseleave = function () {
            square.classList.add('none');
            large.classList.add('none');
        }
        mid.onmousemove = function () {
            // 矩形坐标
            let x = event.clientX - mid.offsetLeft - square.clientWidth / 2;

            let maxX = mid.clientWidth - square.offsetWidth;
            if (x > maxX) {
                x = maxX;
            }
            if (x < 0) {
                x = 0;
            }
            square.style.cssText = `
                left: ${x}px;
            `;
            large.style.cssText += `
                background-position: -${x * (800 / 430)}px 0;
            `;
        }

    </script>
</body>

</html>